
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
import * as cc from "cc";
import { VMEntity } from '../../framework/vm/VMEntity';
import { VMCenter } from '../../framework/vm/VMCenter';
import { userData } from '../../game/storage/UserData';
import { DemoVMSceneBase } from './DemoVMSceneBase';

/**
 * Predefined variables
 * Name = NewComponent
 * DateTime = Sat Mar 19 2022 10:32:09 GMT+0800 (中国标准时间)
 * Author = 272493431
 * FileBasename = NewComponent.ts
 * FileBasenameNoExtension = NewComponent
 * URL = db://assets/scripts/scene/VMDemo/NewComponent.ts
 * ManualUrl = https://docs.cocos.com/creator/3.4/manual/zh/
 *
 */
 
@ccclass('DemoVMNode')
export class DemoVMNode extends DemoVMSceneBase implements IMVVM{
    _vmTag: string;
    _vmEntitys: VMEntity[];
  
    // @VMLabel({ watchPath: 'userdata.level' })
    @property(cc.Label)
    levelLabel: cc.Label = null;


    // @VMNode({ 
    //     watchPath: 'userdata.level', options: { active: true }, controlChildren: true, formator(param) {
    //         return param.newValue > param.nodeIdx;
    //     }
    // })
    @property(cc.Node)
    starGroup: cc.Node = null;

    @property(cc.Node)
    spriteFace: cc.Node = null;

    // @VMButton({
    //     watchPath: 'userdata.level', min: 0, max: 15, operation: (param) => {
    //         return param.currentValue - 1;
    //     }
    // })
    @property(cc.Button)
    btnMulLevel: cc.Button = null;


    // @VMButton({
    //     watchPath: 'userdata.level', min: 0, max: 15, operation: (param) => {
    //         return param.currentValue + 1;
    //     }
    // })
    @property(cc.Button)
    btnAddLevel: cc.Button = null;
  
    start() {
        super.start();
    }

    onEnable(){

        VMCenter.add(userData,"userdata");

        VMCenter.Label(this,this.levelLabel,{watchPath: "userdata.level"});
        
        // 控制星星的显示  不填写 property 则默认为 active
        VMCenter.Children(this,this.starGroup,{watchPath: "userdata.level", formator(opts){
            return opts.newValue > opts.nodeIdx;
        }})
        
        // 控制星星的角度
        VMCenter.Children(this,this.starGroup,{watchPath: "userdata.level",property: "angle", formator(opts){
            return opts.newValue > opts.nodeIdx ? 30 : 0;
        }})

        // 大于 5 级的时候显示 face 节点
        VMCenter.Node(this,this.spriteFace,{watchPath: "userdata.level",formator(opts){
            return opts.newValue > 5;
        }})
        

        // 移除绑定
        // // VMCenter.removeBind(this,this.starGroup);
        // VMCenter.removeBindWithFilter(this,(entity)=>{
        //     return entity.node === this.starGroup;
        // });


        VMCenter.ButtonClick(this,this.btnAddLevel,{
                watchPath: 'userdata.level', min: 0, max: 11, operation: (param) => {
                    return param.currentValue + 1;
                }
        });

        VMCenter.ButtonClick(this,this.btnMulLevel,{
            watchPath: 'userdata.level', min: 0, max: 11, operation: (param) => {
                return param.currentValue - 1;
            }
        });
    }

    onDisable(){
        
        VMCenter.remove(this);
    }

    // update (deltaTime: number) {
    //     // [4]
    // }
}

/**
 * [1] Class member could be defined like this.
 * [2] Use `property` decorator if your want the member to be serializable.
 * [3] Your initialization goes here.
 * [4] Your update function goes here.
 *
 * Learn more about scripting: https://docs.cocos.com/creator/3.4/manual/zh/scripting/
 * Learn more about CCClass: https://docs.cocos.com/creator/3.4/manual/zh/scripting/decorator.html
 * Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.4/manual/zh/scripting/life-cycle-callbacks.html
 */
